<template>
  <div class="menu_top" ref="menuTop">
    <main-nav :menus-data="topMenu" :router-type="'router'"></main-nav>
    <!-- <el-menu
      mode="horizontal"
      class="el-menu-demo rflex el-scrollbar2 top-scrollbar2"
      :background-color="menuObj.bgColor"
      :text-color="menuObj.textColor"
      :active-text-color="menuObj.activeTextColor"
      :default-active="activeIndex+''">
      <template v-for="(item,index) in topMenu" >
        <el-menu-item :key="index" :class="{'menu_top_nav':true,'isCheckMenu':item.isChecked===true }"  :index="index+''" @click="handleSelect(item,index)">
          <icon-svg :name="item.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
          <p :class="{'isCheck':item.isChecked===true}">{{ item.name }}</p>
        </el-menu-item>

      </template>
    </el-menu>
    <el-button @click.native="logoutHandle()" class="el-icon-switch-button">退出</el-button> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { clearLoginInfo } from '@/utils'

export default {
  name: 'top-menu',
  data() {
    return {
      activeIndex: 0,
      menuObj: {
        bgColor: '',
        textColor: '#303133',
        activeTextColor: '#f9f9f9',
      },
      topMenu: [

      ],
    }
  },
  computed: {
    ...mapGetters([
      'isCollapse',
      'sidebar',
    ]),

  },
  watch: {
    '$route': 'getPath'
  },
  created() {
    // console.log("topMenu  created")
    // console.log(this.$route)
    if (this.$route.name === 'home') {
      this.topMenu = JSON.parse(sessionStorage.getItem('menuList') || '[]');
      this.topMenu[0]['isChecked'] = true;
      this.activeIndex = 0;
      this.changeMenu(0);
      this.$set(this, "topMenu", this.handleNavData(this.topMenu));
      // console.log(this.topMenu);
    } else {
      this.getPath();
    }

  },
  mounted() {

  },
  methods: {
    // 组装nav的数据
    handleNavData(arr) {
      let navData = [];
      if (arr.length) {
        let nowItem = {
          label: '',
          url: '',           // 页面跳转使用 “url” 字段;
          query: '',      // 页面跳转 参数
          icon: '',
          subMenu: []
        }
        arr.forEach(item => {
          let innerItem = _.cloneDeep(nowItem);
          innerItem.label = item.name;
          innerItem.url = item.url ? '/' + item.url.replace(/^\//, '').replace('/', '-') : '';
          innerItem.icon = item.icon;

          if (item.list && item.list.length) {
            innerItem.subMenu.push(...this.handleNavData(item.list));
          }
          navData.push(innerItem);
        });
        return navData;
      }
      return;
    },
    /* handleSelect(data, index) {
      let topMenu = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      topMenu[index]['isChecked'] = true
      this.topMenu = topMenu
      this.activeIndex = index
      // console.log(this.topMenu)
      // console.log(this.activeIndex)
      this.changeMenu(index)
    }, */
    changeMenu(index) {
      // sessionStorage.setItem('activeMenuList', JSON.stringify(this.topMenu[index].list || '[]'))
      this.$store.commit('common/updateMenuList', this.topMenu[index].list)
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/logout'),
          method: 'post',
          data: this.$http.adornData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            localStorage.clear();
            sessionStorage.clear()
            this.$store.commit("updatechecktask", {});
            this.$store.commit("checkChanel", {});
            // console.log(this.$store.state, 'this.$store.state');
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => {
      })
    },

    getPath() {
      let topMenu = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      // console.log(topMenu[0],'222');
      if (this.$route.name == 'home') {
        topMenu[0]['isChecked'] = true
        this.activeIndex = 0
      } else {
        for (var i = 0; i < topMenu.length; i++) {
          let item = topMenu[i]
          item['isChecked'] = false
          if (item.menuId == this.$route.meta.parentId) {
            item['isChecked'] = true
            this.activeIndex = i
          }
        }
      }
      this.$store.commit('common/updateMenuList', topMenu[this.activeIndex].list)
      this.topMenu = this.handleNavData(topMenu);
      // console.log("*********"+this.topMenu)
    },
  },

}

</script>

<style lang="less" scoped>
.menu_top {
  // width:calc(100% - 350px);
  .el-menu-demo {
    overflow-y: hidden;
    flex: 1;
  }

  .el-menu-item:focus,
  .el-menu-item:hover {
    outline: 0;
    background-color: #ceeda8;
  }

  .el-menu {
    background: none;
  }

  .menu_top_nav {
    height: 80px;
    line-height: normal;
    text-align: center;
    // width: 122px;
    width: 108px;

    .nav_icon {
      margin-top: 16px;
      font-size: 24px;
    }

    p {
      // font-size: 16px;
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }
  }

  .isCheck {
    color: #f76767 !important;
  }

  .isCheckMenu {
    /*color: #8c8c8c !important;*/
    color: #f76767 !important;
    background-color: #ffffff !important;
  }

  .icon-svg {
    width: 2em !important;
    height: 2em !important;
    fill: currentColor;
    overflow: hidden;
    margin-top: 5px;
  }
}

/deep/ .el-icon-switch-button:before {
  font-size: 30px;
  display: block;
  padding-bottom: 5px;
  color: red;
}

.el-icon-switch-button {
  color: red;
}
</style>
